import { Link } from '@brillout/docpress'
import { TextEnv, TextEnv2 } from './TextEnv'

List of built-in hooks. (You can <Link href="/meta">create your own</Link>.)


## Basic

- [**`data()`**](/data): <TextEnv>server (configurable)</TextEnv> Called before the page is rendered, for fetching data.
- [**`guard()`**](/guard): <TextEnv>server (configurable)</TextEnv> Protect pages from unprivileged access.
- [**`onHydrationEnd()`**](/onHydrationEnd): <TextEnv>client</TextEnv> Called after the page is <Link href="/hydration">hydrated</Link>.
- [**`onPageTransitionStart()`**](/onPageTransitionStart): <TextEnv>client</TextEnv> Called upon page navigation, before the new page starts rendering.
- [**`onPageTransitionEnd()`**](/onPageTransitionEnd): <TextEnv>client</TextEnv> Called upon page navigation, after the new page has finished rendering.
- [**`onBeforePrerenderStart()`**](/onBeforePrerenderStart): <TextEnv>server</TextEnv> Called before the whole pre-rendering process starts.
- [**`onPrerenderStart()`**](/onPrerenderStart): <TextEnv>server</TextEnv> Global hook called when pre-rendering starts.
- [**`onCreateApp()`**](/onCreateApp): <TextEnv>server & client</TextEnv> `vike-vue` Called after creating Vue's `app` instance.


## Advanced

> Most users don't need to know about these hooks.

- [**`onBeforeRender()`**](/onBeforeRender): <TextEnv>server (configurable)</TextEnv> Called before the page is rendered, lower-level and usually for advanced integrations with data fetching tools.
- [**`onRenderHtml()`**](/onRenderHtml): <TextEnv>server</TextEnv> Called when a page is rendered to HTML on the server-side.
- [**`onRenderClient()`**](/onRenderClient): <TextEnv>client</TextEnv> Called when a page is rendered on the client-side.
- [**`onBeforeRoute()`**](/onBeforeRoute): <TextEnv>server & client</TextEnv> Called before the URL is routed to a page.
- [**`onBeforeRenderClient()`**](/onBeforeRenderClient): <TextEnv>client</TextEnv> Called at the beginning of <Link href="/onRenderClient">`onRenderClient()`</Link>.
- [**`onAfterRenderClient()`**](/onAfterRenderClient): <TextEnv>client</TextEnv> Called at the end of <Link href="/onRenderClient">`onRenderClient()`</Link>.
- [**`onAfterRenderHtml()`**](/onAfterRenderHtml): <TextEnv>server</TextEnv> Called at the end of <Link href="/onRenderHtml">`onRenderHtml()`</Link>.



## Upcoming

Potentially upcoming hooks:
- [New hook `onBoot()`](https://github.com/vikejs/vike/issues/962)
- [New hook `onRequestBegin()`](https://github.com/vikejs/vike/issues/1613)
- [New hook `onLog()`](https://github.com/vikejs/vike/issues/1438)
- [New hook `onRenderContent()`: generate non-HTML files with arbitrary content](https://github.com/vikejs/vike/issues/1525)


## Order

**First render:**

1. <TextEnv2>server</TextEnv2> <Link href="/renderPage">`renderPage()`</Link>
1. <TextEnv2>server</TextEnv2> <Link href="/onBeforeRoute">`onBeforeRoute()`</Link>
1. <TextEnv2>server</TextEnv2> <Link href="/routing">Routing</Link>
   > The routing executes your <Link href="/route-function">Route Functions</Link> (of all your pages).
1. <TextEnv2>server</TextEnv2> <Link href="/guard">`guard()`</Link>
1. <TextEnv2>server</TextEnv2> <Link href="/data">`data()`</Link>
1. <TextEnv2>server</TextEnv2> <Link href="/onBeforeRender">`onBeforeRender()`</Link>
1. <TextEnv2>server</TextEnv2> <Link href="/onRenderHtml">`onRenderHtml()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/onRenderClient">`onRenderClient()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/onHydrationEnd">`onHydrationEnd()`</Link>

<br/>
**Page navigation:**

1. <TextEnv2>client</TextEnv2> <Link href="/onPageTransitionStart">`onPageTransitionStart()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/onBeforeRoute">`onBeforeRoute()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/routing">Routing</Link>
1. <TextEnv2>server</TextEnv2> <Link href="/onBeforeRoute">`onBeforeRoute()`</Link>
1. <TextEnv2>server</TextEnv2> <Link href="/routing">Routing</Link>
   > The routing is executed twice: once for the client and once for the server.
1. <TextEnv2>server</TextEnv2> <Link href="/guard">`guard()`</Link>
1. <TextEnv2>server</TextEnv2> <Link href="/data">`data()`</Link>
1. <TextEnv2>server</TextEnv2> <Link href="/onBeforeRender">`onBeforeRender()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/onRenderClient">`onRenderClient()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/onPageTransitionEnd">`onPageTransitionEnd()`</Link>

<br/>
**Page navigation, <Link href="/data#client-side">with client-side data fetching</Link>:**

1. <TextEnv2>client</TextEnv2> <Link href="/onPageTransitionStart">`onPageTransitionStart()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/onBeforeRoute">`onBeforeRoute()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/routing">Routing</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/guard">`guard()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/data">`data()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/onBeforeRender">`onBeforeRender()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/onRenderClient">`onRenderClient()`</Link>
1. <TextEnv2>client</TextEnv2> <Link href="/onPageTransitionEnd">`onPageTransitionEnd()`</Link>


## See also

 - <Link href="/settings" />
 - <Link href="/config" />
